<?php
/**
 * [PHPFOX_HEADER]
 * 
 * @copyright		[PHPFOX_COPYRIGHT]
 * @author  		Raymond Benc
 * @package 		Phpfox
 * @version 		$Id: index.html.php 300 2009-03-20 13:01:54Z Raymond_Benc $
 */
defined('PHPFOX') or exit('NO DICE!');
?>

{literal}
<style>
    .webcam-holder, #webcam-capture-show {
        width: 350px;
        float: left;
        min-height: 250px;
    }


</style>
{/literal}

<div class="webcam-holder">
    <div id="webcam">

    </div>
    <input type="button" value="Take a picture" onclick="webcam.capture()" id="js-capture" class="button" />
    <input type="button" value="Take a picture after 3 seconds" onclick="webcam.capture(3)" id="js-capture" class="button" />
</div>

<div id="webcam-capture-show">
    <canvas id="canvas" width="320" height="240"></canvas>
    <div id="webcam-action-holder" style="display: none;">
        <div class="item_bar">
            <div class="item_bar_action_holder">
                <a class="item_bar_action" href="#"><span>Actions</span></a>		
                <ul style="display: none;" id="takepicture_action">
                    <li><a href="#" id="js-download" title="download..." onclick="$Core.webcam.download(); return false;">Download...</a></li>
                    <!--<li><a href="#" title="Add to Photo" id="js-add-to-photo">Add to Photo</a></li>-->
                    <li><a href="#" title="Upload to Social" id="js-upload-to-social" onclick="$Core.webcam.uploadToSocial(); return false;">Upload to Social</a></li>
                </ul>			
            </div>
        </div>
    </div>
</div>

<div class="clear"></div>

{literal}
<script type="text/javascript">
        $Core.webcam = {
            canvas: '',
            uploadToSocial: function() {
                tb_show('Upload to social', $.ajaxBox('takepicture.uploadToSocial'));
            },
            download: function() {
                window.open(this.getCavas().toDataURL('image/png'));
            },
            getCavas: function() {
                if (!this.cavas) {
                    this.cavas = document.getElementById('canvas');
                }

                return this.cavas;
            },
            getImage: function() {
                if (this.getCavas().toDataURL) {
                    return {type: "data", 'image': this.getCavas().toDataURL("image/png")};
                } else {
                    return {type: "pixel", image: image.join('|')};
                }
            }
        }
        $Behavior.webcam = function() {

            $(function() {
                var pos = 0, ctx = null, saveCB, image = [], isStartCapture = 0;

                var canvas = document.getElementById("canvas");
                canvas.setAttribute('width', 320);
                canvas.setAttribute('height', 240);

                if (canvas.toDataURL) {

                    ctx = canvas.getContext("2d");

                    image = ctx.getImageData(0, 0, 320, 240);

                    saveCB = function(data) {

                        var col = data.split(";");
                        var img = image;

                        for (var i = 0; i < 320; i++) {
                            var tmp = parseInt(col[i]);
                            img.data[pos + 0] = (tmp >> 16) & 0xff;
                            img.data[pos + 1] = (tmp >> 8) & 0xff;
                            img.data[pos + 2] = tmp & 0xff;
                            img.data[pos + 3] = 0xff;
                            pos += 4;
                        }

                        if (pos >= 4 * 320 * 240) {
                            ctx.putImageData(img, 0, 0);
                            pos = 0;
                            if (!isStartCapture) {
                                $('#webcam-action-holder').css({display: 'block'});
                                ++isStartCapture;
                            }
                        }
                    };

                } else {

                    saveCB = function(data) {
                        image.push(data);

                        pos += 4 * 320;

                        if (pos >= 4 * 320 * 240) {
                            if (!isStartCapture) {
                                $('#webcam-action-holder').css({display: 'block'});
                                ++isStartCapture;
                            }
                            pos = 0;
                        }
                    };
                }


                jQuery("#webcam").webcam({
                    width: 320,
                    height: 240,
                    mode: "callback",
                    swffile: oParams.sJsHome + "/module/takepicture/static/jscript/jscam_canvas_only.swf",
                    onTick: function() {
                        console.log('onTick');
                    },
                    onSave: saveCB,
                    onCapture: function() {
                        webcam.save();
                    },
                    debug: function() {
                        console.log('debug');
                    },
                    onLoad: function() {
                        console.log('onLoad');
                    }
                });
            });


        }
</script>
{/literal}


{module name="connectsocial.connect"}
